<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>空气识别</title>
  <link rel="stylesheet" href="../static/index.css">
  <script src="../static/vue.js"></script>
  <link rel="stylesheet" href="../static/element_index.css">
  <script src="../static/index.js"></script>
  <script src="../static/axios.min.js"></script>
</head>
<style>
  .exit {
    position: absolute;
    top: 0;
    left: 20px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #66b1ff;
    text-align: center;
    line-height: 50px;
    color: white;
    border-radius: 50%;
  }
</style>

<body>
  <div id="app">
    <p class="exit" v-on:click="returns">返回</p>
    <div class="home">
      <div>
        <p v-if="aqi" style="color: red; font-size: 20px;" v-text="texts"></p>
        <el-input placeholder="请输入内容" v-model="city">
          <template slot="prepend">要搜索的城市</template>
        </el-input>
        <el-button type="primary" round v-on:click="getAirData">提交</el-button>

      </div>

    </div>
  </div>

</body>
<script>
  var vm = new Vue({
    el: "#app",
    data() {
      return {
        city: "",
        aqi: "",
        category: "",
        no2: "",
        level: "",
        pm2p5: "",
        texts: ""
      }
    },
    methods: {
      getAirData() {
        console.log(this.urls)
        axios.get("http://localhost:5000/airdata", { params: { city: this.city } }).then(rep => {
          let datas = rep.data["now"]
          this.aqi = datas["aqi"]
          this.category = datas["category"]
          this.no2 = datas["no2"]
          this.level = datas["level"]
          this.pm2p5 = datas["pm2p5"]
          this.texts = "空气质量指数：" + this.aqi + " 空气质量指数级别:" + this.category + " 二氧化碳:" + this.no2 + " 空气质量指数等级：" + this.level + " pm2.5：" + this.pm2p5
        })
      },
      returns() {
        window.location.href = "http://localhost:5000";
      }
    }
  })
</script>

</html>